<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('添加查询模块')}`">{{ $t('添加查询模块') }}</t>
            <li>
                配置<span class="d-code">search-config</span>即可添加列表查询模块。
                <span class="s-code">search-config</span>的配置规则，可以参照
                <span class="s-code pointer" @click="viewAttributes">【Form 表单】</span>内的字段配置，支持配置
                <span class="s-code">requestConfig</span> 自动请求数据。
            </li>
            <li>
                一般来说，<span class="s-code pointer" @click="viewAttributes">【Form 表单】</span>的所有
                <span class="s-code point pointer" @click="viewAttributes">【Attributes】</span>属性均可配置在
                <span class="s-code">search-config</span>对象内
            </li>
            <li>
                查询框是依据<span class="s-code">search-config</span>内的
                <span class="s-code">fields</span>配置来自动生成的，
                当<span class="s-code">fields</span>的长度为<span class="s-code">0</span>时，是不会展示查询模块的
            </li>
            <li>
                你可以在<span class="s-code">search-config</span>内配置
                <span class="s-code">form</span>对象，用于声明查询表单的默认值。
            </li>
            <li>
                在点击查询按钮并且即将执行查询操作前，组件内部提供了一个名为
                <span class="s-code">beforeSearch</span>的回调方法，参数为
                <span class="s-code">form</span>，当该方法返回 false 或 Promise对象且被 reject 时，将中断查询动作；
            </li>
            <li>
                当然，查询框不可能是一成不变的，一般来说，列表查询可能存在很多种类型的查询框，所以
                <span class="s-code pointer" @click="viewAttributes">【Form 表单】</span>
                内置了 20 多种类型的查询框，基本覆盖到所有需要的场景，你只需要在表单项配置内设定不同的
                <span class="s-code">type</span>来激活对应类型的表单项。
                例如：
                <span class="s-code">文本框 (text)</span>、
                <span class="s-code">下拉选择框 (select)</span>、
                <span class="s-code">单/复选框 (radio/check)</span>、
                <span class="s-code">弹窗列表选择器 (table)</span>等等，下方示例仅举例了部分用法，详细配置请认真阅读
                <span class="s-code pointer" @click="viewAttributes">【Form 表单】</span>的文档内容
            </li>
            <li>
                如果列表数据内某列的单元格的值为数据字典的编码，你需要将其转成字典编码对应的文案来展示在单元格内，此时你可以通过
                给列配置对象加上<span class="s-code">relateFieldCode</span>字段（关联某个查询控件的<span class="s-code">code</span>），
                表示将对应控件的选择项(下拉选项等)作为字典库来解析单元格需要展示的文案内容；同样地，这里还提供了
                <span class="s-code">formatRequestConfig</span>来配置自动请求字典数据的配置项，详细用法可查看下方示例
            </li>
        </template>
        <sib-table :search-config="searchConfig" :table-column="tableColumn" :table-data="tableData"></sib-table>
    </example>
</template>

<script>
import { ref, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessageBox } from 'element-plus';

export default {
    setup() {
        const router = useRouter();
        const tableData = ref(Array(8).fill().map((_, i) => ({
            id: i + 1,
            name: `张三${i + 1}号`,
            sex: i % 2,
            status: i % 2,
            age: i + 20,
        })));

        return {
            searchConfig: {
                fields: [
                    {
                        label: '姓名',
                        code: 'name',
                        type: 'text',
                        maxlength: 30,
                    },
                    {
                        label: '性别',
                        code: 'sex',
                        type: 'select',
                        options: [
                            { value: '0', label: '女' },
                            { value: '1', label: '男' },
                        ],
                    },
                ],
                form: { name: '张三1号' },
                // 点击查询按钮后，即将执行查询操作前的回调方法，当 return false 或 Promise对象且被 reject 时，将中断查询动作；该方法的回调参数为即将发起请求的参数params（包含表单数据）
                // beforeSearch: (params) => params.name !== '张三', // 同步处理示例，返回布尔值
                beforeSearch: () => ElMessageBox.confirm('准备好开始查询了吗？', '提示').catch(() => {}), // 异步处理示例
            },
            tableColumn: [
                {
                    label: '姓名',
                    code: 'name',
                },
                {
                    label: '性别',
                    code: 'sex',
                    relateFieldCode: 'sex',
                },
                {
                    label: '年龄',
                    code: 'age',
                },
                {
                    label: '身高',
                    code: 'height',
                },
                {
                    label: '状态',
                    code: 'status',
                    formatRequestConfig: {
                        requestConfig: {
                            url: '/api/dict-data.json',
                            method: 'get',
                        },
                        optionProps: {
                            label: 'dictLabel',
                            value: 'dictValue',
                        },
                    },
                },
            ],
            tableData,
            viewAttributes() {
                router.push('/form').then(() => {
                    nextTick(() => {
                        const attributesDom = document.getElementById('属性') || document.getElementById('attributes');
                        if (attributesDom) attributesDom.scrollIntoView({ behavior: 'smooth', inline: 'nearest' });
                    });
                });
            },
            templateString: `<template>
    <div class="example-box">
        <sib-table :search-config="searchConfig" :table-column="tableColumn" :table-data="tableData"></sib-table>
    </div>
</template>

<script>
import { ElMessageBox } from 'element-plus';

export default {
    setup() {
        const tableData = ref(Array(8).fill().map((_, i) => ({
            id: i + 1,
            name: \`张三\${i + 1}号\`,
            sex: i % 2,
            status: i % 2,
            age: i + 20,
        })));

        return {
            searchConfig: {
                fields: [
                    {
                        label: '姓名',
                        code: 'name',
                        type: 'text',
                        maxlength: 30,
                    },
                    {
                        label: '性别',
                        code: 'sex',
                        type: 'select',
                        options: [
                            { value: '女', label: '女' },
                            { value: '男', label: '男' },
                        ],
                    },
                ],
                form: { name: '张三1号' },
                // 点击查询按钮后，即将执行查询操作前的回调方法，当 return false 或 Promise对象且被 reject 时，将中断查询动作；该方法的回调参数为即将发起请求的参数params（包含表单数据）
                // beforeSearch: (params) => params.name !== '张三', // 同步处理示例，返回布尔值
                beforeSearch: () => ElMessageBox.confirm('准备好开始查询了吗？', '提示').catch(() => {}), // 异步处理示例
            },
            tableColumn: [
                {
                    label: '姓名',
                    code: 'name',
                },
                {
                    label: '性别',
                    code: 'sex',
                    // 自动根据【查询模块】内的 “性别” 控件的选项来格式化单元格内容
                    relateFieldCode: 'sex',
                },
                {
                    label: '年龄',
                    code: 'age',
                },
                {
                    label: '身高',
                    code: 'height',
                },
                {
                    label: '状态',
                    code: 'status',
                    // 自动根据接口获取字典数据，并根据单元格的初始值来动态解析格式化后单元格的文案
                    formatRequestConfig: {
                        requestConfig: {
                            url: '/api/dict-data.json',
                            method: 'get',
                        },
                        optionProps: {
                            label: 'dictLabel',
                            value: 'dictValue',
                        },
                    },
                },
            ],
            tableData,
        };
    },
};
<\/script>`,
        };
    },
};
</script>

<style lang="scss">
.pointer {
    cursor: pointer;
    text-decoration-line: underline;
}
</style>
